<script>
    import Logo from './logo.vue'
    import LoginForm from './LoginForm.vue'
    export default {
        components: {
            Logo,
            LoginForm,
        },
    }
</script>
<template>
    <div class="login-page">
        <Logo />
        <div class="login-form-box">
            <LoginForm />
        </div>
    </div>
</template>
<style lang="scss" scoped>
    .login-page {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        overflow: hidden;
        background-image: url('~@/assets/image/login/background-login.png');
        background-size: 100% 100%;
        background-size: cover;

        .login-form-box {
            border-radius: 6px;
            background: #ffffff;
            width: calc(100vw * 468 / 1920);
            height: calc(100vh * 520 / 1080);
            min-width: 360px;
            min-height: 454px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 63%;
            z-index: 10;
            margin: auto;
            padding: 0px calc(100vw * 50 / 1920) 0px calc(100vw * 50 / 1920);
        }
    }

    .login-form-box {
        border-radius: 6px;
        background: #ffffff;
        width: calc(100vw * 468 / 1920);
        height: calc(100vh * 520 / 1080);
        min-width: 360px;
        min-height: 454px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 63%;
        z-index: 10;
        margin: auto;
        padding: 0px calc(100vw * 50 / 1920) 0px calc(100vw * 50 / 1920);
    }
</style>
